<template>
  <div>
    <el-row type="flex" justify="center" class="footer">
      <el-col :span="24" class="container">
        <el-row class="footer_content">
          <el-col :span="4">
            <div class="footer_list_title">关于云医康</div>
            <ul v-for="list in aboutList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="footer_list_title">消费者保障</div>
            <ul v-for="list in protectionList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="footer_list_title">配送方式</div>
            <ul v-for="list in distributionList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="footer_list_title">支付方式</div>
            <ul v-for="list in payList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="footer_list_title">售后服务</div>
            <ul v-for="list in serviceList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="footer_list_title">联系我们</div>
            <ul v-for="list in ContactUsList">
              <router-link :to="list.url" tag="li">{{list.title}}</router-link>
            </ul>
          </el-col>
        </el-row>
        <div class="footer_bottom">
          <p class="Mg-R30">版权所有© 2018-2025 山东云医康医院管理有限公司</p>
          <p>备案/许可证编号为：鲁ICP备18033517</p>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'Footer',
    data() {
      return {
        aboutList: [
          {title: "关于我们", url: ""},
          {title: "友情链接", url: ""},
        ],
        protectionList: [
          {title: "网购警示", url: ""},
          {title: "隐私保护", url: ""},
        ],
        distributionList: [
          {title: "物流配送", url: ""},
          {title: "运费说明", url: ""},
          {title: "门店自取", url: ""},
          {title: "验收标准", url: ""},
        ],
        payList: [
          {title: "支付宝", url: ""},
          {title: "微信", url: ""},
          {title: "鲁医通", url: ""},
          {title: "医保卡", url: ""},
        ],
        serviceList: [
          {title: "退换货保障", url: ""},
          {title: "发票制度", url: ""},
          {title: "退款说明", url: ""},
        ],
        ContactUsList: [
          {title: "市场合作：yanghaiwen@yunyikang.com", url: ""},
          {title: "商务合作：chenyanan@yunyikang.com", url: ""},
          {title: "客服热线：400-1524-2563", url: ""},
        ]
      }
    }
  }
</script>

<style scoped>
  .footer {
    padding-top: 80px;
    border-top: 1px solid rgba(230, 230, 230, 1);
    padding-bottom: 30px;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .footer_list_title {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 30px;
  }

  .footer_content {
    margin-bottom: 80px;
  }
  .footer_bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:12px;
    color:rgba(102,102,102,.6);
  }
  .el-col li {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
    cursor: pointer;
  }

  .el-col li:hover {
    color: #128DFF;
  }
</style>
